<template>
    <div>
        <el-card class="!border-none" shadow="never">
            <el-alert type="warning" title="温馨提示：用于管理网站的分类，只可添加到一级" :closable="false" show-icon>
                <template #title>
                    温馨提示：支付宝开放平台申请直达--
                    <a href="https://open.alipay.com/" target="_blank" rel="noopener noreferrer" style="color: blue;">
                        立即申请
                    </a>
                </template>
            </el-alert>
        </el-card>
        <el-form ref="formRef" style="padding: 0 8px" label-width="150px" :model="formData">
            <el-card class="!border-none mb-4">
                <el-form-item label="第三方应用appid:">
                    <div class="w-80">
                        <el-input class="w-[500px]" placeholder="请输入第三方应用appid" v-model="formData.appid">
                        </el-input>
                    </div>
                </el-form-item>
                <el-form-item label="应用私钥:">
                    <div class="w-80">
                        <el-input class="w-[500px]" placeholder="请输入应用私钥" v-model="formData.secret_key" type="textarea"
                            :rows="5">
                        </el-input>
                    </div>
                </el-form-item>
                <el-form-item label="支付宝公钥:">
                    <div class="w-80">
                        <el-input class="w-[500px]" placeholder="请输入支付宝公钥" v-model="formData.public_key" type="textarea"
                            :rows="5">
                        </el-input>
                    </div>

                </el-form-item>
                <el-form-item label="IP白名单:">
                    <div class="w-80">
                        <el-input class="w-[500px]" placeholder="请输入IP白名单" v-model="formData.ip" disabled>
                        </el-input>
                    </div>
                    <el-button v-copy="formData.ip" type="primary">复制</el-button>
                </el-form-item>
            </el-card>
        </el-form>
        <footer-btns>
            <el-button type="primary" @click="addHandle">保存</el-button>
        </footer-btns>
    </div>
</template>
<script lang="ts" setup>
import {
    getConfig,
    setConfig
} from '@/api/setting/zfbpay'
const formData = reactive({
    appid: "",
    ip: "",
    public_key: "",
    secret_key: ""
})
const gerLists = async () => {
    const lists = await getConfig({})
    formData.appid = lists.appid
    formData.ip = lists.ip
    formData.public_key = lists.public_key
    formData.secret_key = lists.secret_key
}
const addHandle = async () => {
    await setConfig(formData)
}
gerLists()
</script>